<!-- 绿色通道 - 患者列表 - 医疗记录 - 主诉与病史 界面 -->
<template>
  <div id="box">
    <!-- <div class="addContent"><el-button type="primary" style="float: right;margin-right: 40px; font-size: 16px;padding: 8px 15px;" @click="popup">新 增</el-button></div> -->
    <div v-for="(each, subscript) in getHistoryData" :key="subscript" class="outer">
      <el-row :gutter="24">
        <el-col :span="24"><span>主诉症状</span></el-col>
        <el-col :span="24">
          <el-checkbox-group v-model="each.symptom">
            <el-checkbox v-for="(item, index) in tellSymptomsList" :key="index" :label="item.value">{{ item.label }}</el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="24">
        <el-col :span="24"><span>入院评估</span></el-col>
        <el-col :span="24">
          <el-radio-group v-model="each.cerebralHernia">
            <el-radio label="1">脑疝</el-radio>
            <el-radio label="2">缺血症状或脑梗死</el-radio>
            <el-radio label="3">本次破裂致蛛网膜下腔出血</el-radio>
            <el-radio label="4">本次破裂致蛛网膜下腔出血合并脑出血</el-radio>
          </el-radio-group>
        </el-col>
      </el-row> -->
      <el-row :gutter="24">
        <el-col :span="24"><span>既往病史</span></el-col>
        <el-col :span="24">
          <el-checkbox-group v-model="each.previousIllness">
            <el-checkbox v-for="(item, index) in pastList" :key="index" :label="item.value">{{ item.label }}</el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24"><span>家族史</span></el-col>
        <el-col class="botton" :span="4">
          <span>卒中家族史</span>
          <div>
            <el-radio-group v-model="each.isFamilyHistoryOfStroke">
              <el-radio label="1">有</el-radio>
              <el-radio label="2">无</el-radio>
              <el-radio label="3">不详</el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col class="botton" :span="4">
          <span>冠心病家族史</span>
          <div>
            <el-radio-group v-model="each.isFamilyHistoryOfCHD">
              <el-radio label="1">有</el-radio>
              <el-radio label="2">无</el-radio>
              <el-radio label="3">不详</el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col class="botton" :span="4">
          <span>高血压家族史</span>
          <div>
            <el-radio-group v-model="each.isFamilyHistoryOfHypertension">
              <el-radio label="1">有</el-radio>
              <el-radio label="2">无</el-radio>
              <el-radio label="3">不详</el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col class="botton" :span="4">
          <span>糖尿病家族史</span>
          <div>
            <el-radio-group v-model="each.isFamilyHistoryOfDM">
              <el-radio label="1">有</el-radio>
              <el-radio label="2">无</el-radio>
              <el-radio label="3">不详</el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col class="botton" :span="4">
          <span>血脂异常家族史</span>
          <div>
            <el-radio-group v-model="each.isFamilyHistoryOfDyslipidemia">
              <el-radio label="1">有</el-radio>
              <el-radio label="2">无</el-radio>
              <el-radio label="3">不详</el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col class="botton" :span="4">
          <span>颅内动脉瘤家族史</span>
          <div>
            <el-radio-group v-model="each.isFamilyHistoryOfAneurysm">
              <el-radio label="1">有</el-radio>
              <el-radio label="2">无</el-radio>
              <el-radio label="3">不详</el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col :span="24" />
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24"><span>入院前用药史（发病前六个月内，持续时间2周以上）</span></el-col>
        <el-col class="botton" :span="4">
          <span>抗血小板药</span>
          <div>
            <el-radio-group v-model="each.isHistoryOfAntiplateletDrug">
              <el-radio label="1">有</el-radio>
              <el-radio label="2">无</el-radio>
              <el-radio label="3">不详</el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col class="botton" :span="4">
          <span>抗凝药</span>
          <div>
            <el-radio-group v-model="each.isHistoryOfAnticoagulantDrug">
              <el-radio label="1">有</el-radio>
              <el-radio label="2">无</el-radio>
              <el-radio label="3">不详</el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col class="botton" :span="4">
          <span>降压药</span>
          <div>
            <el-radio-group v-model="each.isHistoryOfAntihypertensiveDrug">
              <el-radio label="1">有</el-radio>
              <el-radio label="2">无</el-radio>
              <el-radio label="3">不详</el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col class="botton" :span="4">
          <span>降糖药</span>
          <div>
            <el-radio-group v-model="each.isHistoryOfHypoglycemiDrug">
              <el-radio label="1">有</el-radio>
              <el-radio label="2">无</el-radio>
              <el-radio label="3">不详</el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col class="botton" :span="4">
          <span>调脂药</span>
          <div>
            <el-radio-group v-model="each.isHistoryOfLipidRegulatingDrug">
              <el-radio label="1">有</el-radio>
              <el-radio label="2">无</el-radio>
              <el-radio label="3">不详</el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col class="botton" :span="4">
          <span>其他药物</span>
          <div>
            <el-radio-group v-model="each.isHistoryOfOtherDrug">
              <el-radio label="1">有</el-radio>
              <el-radio label="2">无</el-radio>
              <el-radio label="3">不详</el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col class="botton" :span="4">
          <span>未用药</span>
          <div>
            <el-radio-group v-model="each.isHistoryOfNoDrug">
              <el-radio label="1">有</el-radio>
              <el-radio label="2">无</el-radio>
              <el-radio label="3">不详</el-radio>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="23">
          <span>备 注：</span>
          <el-input v-model="each.remark" placeholder="请输入内容" />
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :offset="22" :span="2"><el-button type="primary" @click="modifyHistory(subscript)">保 存</el-button></el-col>
      </el-row>
    </div>

    <el-dialog title="新增病史" :visible.sync="newincalogase" width="60%" :before-close="handleClose">
      <div class="outer_layer">
        <el-row :gutter="24">
          <el-col :span="24"><span>主诉症状</span></el-col>
          <el-col :span="24">
            <el-checkbox-group v-model="tellSymptoms">
              <el-checkbox v-for="(item, index) in tellSymptomsList" :key="index" :label="item.value">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="24">
          <el-col :span="24"><span>入院评估</span></el-col>
          <el-col :span="24">
            <el-radio-group v-model="seiZure">
              <el-radio label="1">脑疝</el-radio>
              <el-radio label="2">缺血症状或脑梗死</el-radio>
              <el-radio label="3">本次破裂致蛛网膜下腔出血</el-radio>
              <el-radio label="4">本次破裂致蛛网膜下腔出血合并脑出血</el-radio>
            </el-radio-group>
          </el-col>
        </el-row> -->
        <el-row :gutter="24">
          <el-col :span="24"><span>既往病史</span></el-col>
          <el-col :span="24">
            <el-checkbox-group v-model="past">
              <el-checkbox v-for="(item, index) in pastList" :key="index" :label="item.value">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24"><span>家族史</span></el-col>
          <el-col class="botton" :span="5">
            <span>卒中家族史</span>
            <div>
              <el-radio-group v-model="apoplexy">
                <el-radio label="1">有</el-radio>
                <el-radio label="2">无</el-radio>
                <el-radio label="3">不详</el-radio>
              </el-radio-group>
            </div>
          </el-col>
          <el-col class="botton" :span="5">
            <span>冠心病家族史</span>
            <div>
              <el-radio-group v-model="coronary">
                <el-radio label="1">有</el-radio>
                <el-radio label="2">无</el-radio>
                <el-radio label="3">不详</el-radio>
              </el-radio-group>
            </div>
          </el-col>
          <el-col class="botton" :span="5">
            <span>高血压家族史</span>
            <div>
              <el-radio-group v-model="hypertension">
                <el-radio label="1">有</el-radio>
                <el-radio label="2">无</el-radio>
                <el-radio label="3">不详</el-radio>
              </el-radio-group>
            </div>
          </el-col>
          <el-col class="botton" :span="5">
            <span>糖尿病家族史</span>
            <div>
              <el-radio-group v-model="diabetes">
                <el-radio label="1">有</el-radio>
                <el-radio label="2">无</el-radio>
                <el-radio label="3">不详</el-radio>
              </el-radio-group>
            </div>
          </el-col>
          <el-col class="botton" :span="5">
            <span>血脂异常家族史</span>
            <div>
              <el-radio-group v-model="Dyslipidemia">
                <el-radio label="1">有</el-radio>
                <el-radio label="2">无</el-radio>
                <el-radio label="3">不详</el-radio>
              </el-radio-group>
            </div>
          </el-col>
          <el-col class="botton" :span="5">
            <span>颅内动脉瘤家族史</span>
            <div>
              <el-radio-group v-model="Intracranial">
                <el-radio label="1">有</el-radio>
                <el-radio label="2">无</el-radio>
                <el-radio label="3">不详</el-radio>
              </el-radio-group>
            </div>
          </el-col>
          <el-col :span="24" />
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24"><span>入院前用药史（发病前六个月内，持续时间2周以上）</span></el-col>
          <el-col class="botton" :span="5">
            <span>抗血小板药</span>
            <div>
              <el-radio-group v-model="Antiplatelet">
                <el-radio label="1">有</el-radio>
                <el-radio label="2">无</el-radio>
                <el-radio label="3">不详</el-radio>
              </el-radio-group>
            </div>
          </el-col>
          <el-col class="botton" :span="5">
            <span>抗凝药</span>
            <div>
              <el-radio-group v-model="Anticoagulation">
                <el-radio label="1">有</el-radio>
                <el-radio label="2">无</el-radio>
                <el-radio label="3">不详</el-radio>
              </el-radio-group>
            </div>
          </el-col>
          <el-col class="botton" :span="5">
            <span>降压药</span>
            <div>
              <el-radio-group v-model="stepDown">
                <el-radio label="1">有</el-radio>
                <el-radio label="2">无</el-radio>
                <el-radio label="3">不详</el-radio>
              </el-radio-group>
            </div>
          </el-col>
          <el-col class="botton" :span="5">
            <span>降糖药</span>
            <div>
              <el-radio-group v-model="Hypoglycemic">
                <el-radio label="1">有</el-radio>
                <el-radio label="2">无</el-radio>
                <el-radio label="3">不详</el-radio>
              </el-radio-group>
            </div>
          </el-col>
          <el-col class="botton" :span="5">
            <span>调脂药</span>
            <div>
              <el-radio-group v-model="Regulating">
                <el-radio label="1">有</el-radio>
                <el-radio label="2">无</el-radio>
                <el-radio label="3">不详</el-radio>
              </el-radio-group>
            </div>
          </el-col>
          <el-col class="botton" :span="5">
            <span>其他药物</span>
            <div>
              <el-radio-group v-model="other">
                <el-radio label="1">有</el-radio>
                <el-radio label="2">无</el-radio>
                <el-radio label="3">不详</el-radio>
              </el-radio-group>
            </div>
          </el-col>
          <el-col class="botton" :span="5">
            <span>未用药</span>
            <div>
              <el-radio-group v-model="Unused">
                <el-radio label="1">有</el-radio>
                <el-radio label="2">无</el-radio>
                <el-radio label="3">不详</el-radio>
              </el-radio-group>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="23">
            <span>备 注：</span>
            <el-input v-model="input" placeholder="请输入内容" />
          </el-col>
        </el-row>
        <!-- <el-row :gutter="24">
          <el-col :offset="20" :span="2">
            <el-button type="primary" @click="addHistory">保 存</el-button>
          </el-col>
        </el-row> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="newincalogase = false">取 消</el-button>
        <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
        <el-button type="primary" @click="addHistory">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getHistoryStroke, addHistoryPostStroke } from '@/api/green-channel/medicalHistory.js'
export default {
  // 由主页面(父组件) 接收来的, 选择项的数据
  props: ['checkrowdata'], // 由主页面(父组件) 接收来的, 选择项的数据
  data() {
    return {
      /* 新增 */
      newincalogase: false,
      /* end ------------ */
      // 主诉与病史
      tellSymptoms: [], // 主诉症状
      tellSymptomsList: [
        { value: '1', label: '一侧肢体无力、麻木、笨拙' },
        { value: '2', label: '一侧面部麻木或口角歪斜' },
        { value: '3', label: '说话不清或理解语言困难' },
        { value: '4', label: '双眼向一侧凝视' },
        { value: '5', label: '一侧或双眼视力丧失或模糊' },
        { value: '6', label: '视物旋转或平衡障碍，眩晕伴呕吐' },
        { value: '7', label: '既往少见的严重头疼、呕吐' },
        { value: '8', label: '意识障碍或抽搐' }
      ], // 主诉症状列表
      // seiZure: '', //  入院评估
      past: [], // 既往病史
      pastList: [
        { value: '1', label: '高血压' },
        { value: '2', label: '糖尿病' },
        { value: '3', label: '冠心病' },
        { value: '4', label: '房颤' },
        { value: '5', label: '脑梗死' },
        { value: '6', label: '脑出血' },
        { value: '7', label: '消化道出血' },
        { value: '8', label: '大手术' },
        { value: '9', label: '头颅外伤' },
        { value: '10', label: '肿瘤病史' },
        { value: '11', label: '其他病史' },
        { value: '12', label: '蛛网膜下腔出血' },
        { value: '13', label: 'TIA' },
        { value: '14', label: '血脂异常' },
        { value: '15', label: '心肌梗死' },
        { value: '16', label: '先天性心脏病' },
        { value: '17', label: '瓣膜性心脏病' },
        { value: '18', label: '其他类型心脏疾病' },
        { value: '19', label: '外周动脉疾病' },
        { value: '20', label: '动脉瘤破裂' }
      ],
      /* 家族史 */
      apoplexy: '3', // 卒中家族史
      coronary: '3', // 冠心病家族史
      hypertension: '3', // 高血压家族史
      diabetes: '3', // 糖尿病家族史
      Dyslipidemia: '3', // 血脂异常家族史
      Intracranial: '3', // 颅内动脉瘤家族史
      /* 入院前用药史 */
      Antiplatelet: '3', // 抗血小板药
      Anticoagulation: '3', // 抗凝药
      stepDown: '3', // 降压药
      Regulating: '3', // 调解血脂药
      Hypoglycemic: '3', // 降糖药
      other: '3', // 其他药物
      Unused: '3', // 未用药
      // 备注
      input: '',
      getHistoryData: [],
      dataTemplate: {
        id: null,
        dispatchId: this.checkrowdata.dispatchId,
        medicalId: this.checkrowdata.medicalId,
        userId: this.checkrowdata.userId,
        symptom: [],
        // cerebralHernia: '',  //入院评估
        previousIllness: [],
        isFamilyHistoryOfStroke: '',
        isFamilyHistoryOfCHD: '',
        isFamilyHistoryOfHypertension: '',
        isFamilyHistoryOfDM: '',
        isFamilyHistoryOfDyslipidemia: '',
        isFamilyHistoryOfAneurysm: '',
        isHistoryOfAntiplateletDrug: '',
        isHistoryOfAnticoagulantDrug: '',
        isHistoryOfAntihypertensiveDrug: '',
        isHistoryOfLipidRegulatingDrug: '',
        isHistoryOfHypoglycemiDrug: '',
        isHistoryOfOtherDrug: '',
        isHistoryOfNoDrug: '',
        remark: ''
      }
    }
  },
  computed: {},
  updated() {},
  created() {
    this.diseasehistory()
  },
  methods: {
    /* 新增 */
    // popup() {
    // this.getHistoryData = [this.dataTemplate]
    // console.log(this.getHistoryData)
    // this.newincalogase = true
    // },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    /* end ------- */
    // 病史接口
    diseasehistory() {
      const dispatchid = this.checkrowdata.dispatchId
      const apiToken = this.$store.getters.apiToken
      getHistoryStroke(dispatchid, apiToken).then(res => {
        if (res.data) {
          const oldgetHistoryData = res.data
          if (!oldgetHistoryData.length) {
            this.getHistoryData = [this.dataTemplate]
          } else {
            oldgetHistoryData.forEach(res => {
              if (res.symptom) {
                res.symptom = res.symptom.split('|')
              } else {
                res.symptom = []
              }
              if (res.previousIllness) {
                res.previousIllness = res.previousIllness.split('|')
              } else {
                res.previousIllness = []
              }
            })
            this.getHistoryData = oldgetHistoryData
          }
        }
      })
    },

    // 修改病史
    modifyHistory(index) {
      let data = {}
      let newsymptom = ''
      let newpreviousIllness = ''
      this.getHistoryData.forEach((res, subscript) => {
        if (res.symptom) {
          newsymptom = res.symptom.join('|')
        }
        if (res.previousIllness) {
          newpreviousIllness = res.previousIllness.join('|')
        }
        if (subscript === index) {
          data = {
            id: res.id,
            dispatchId: this.checkrowdata.dispatchId,
            medicalId: this.checkrowdata.medicalId,
            userId: this.checkrowdata.userId,
            symptom: newsymptom,
            // cerebralHernia: res.cerebralHernia, //入院评估
            previousIllness: newpreviousIllness,
            isFamilyHistoryOfStroke: res.isFamilyHistoryOfStroke,
            isFamilyHistoryOfCHD: res.isFamilyHistoryOfCHD,
            isFamilyHistoryOfHypertension: res.isFamilyHistoryOfHypertension,
            isFamilyHistoryOfDM: res.isFamilyHistoryOfDM,
            isFamilyHistoryOfDyslipidemia: res.isFamilyHistoryOfDyslipidemia,
            isFamilyHistoryOfAneurysm: res.isFamilyHistoryOfAneurysm,
            isHistoryOfAntiplateletDrug: res.isHistoryOfAntiplateletDrug,
            isHistoryOfAnticoagulantDrug: res.isHistoryOfAnticoagulantDrug,
            isHistoryOfAntihypertensiveDrug: res.isHistoryOfAntihypertensiveDrug,
            isHistoryOfHypoglycemiDrug: res.isHistoryOfHypoglycemiDrug,
            isHistoryOfLipidRegulatingDrug: res.isHistoryOfLipidRegulatingDrug,
            isHistoryOfOtherDrug: res.isHistoryOfOtherDrug,
            isHistoryOfNoDrug: res.isHistoryOfNoDrug,
            remark: res.remark
          }
        }
      })
      addHistoryPostStroke(data)
        .then(res => {
          console.log(res)
          if (res.code === 0) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '保存失败',
              type: 'error'
            })
          }
        })
        .catch(err => {
          this.$message({
            message: '保存失败',
            type: 'error'
          })
        })
    },

    // 保存病史
    addHistory() {
      let newTellSSymptoms = ''
      let newpast = ''
      if (this.tellSymptoms) {
        newTellSSymptoms = this.tellSymptoms.join('|')
      } else {
        newTellSSymptoms = ''
      }
      if (this.past) {
        newpast = this.past.join('|')
      } else {
        newpast = ''
      }
      const data = {
        id: null,
        dispatchId: this.checkrowdata.dispatchId,
        medicalId: this.checkrowdata.medicalId,
        userId: this.checkrowdata.userId,
        symptom: newTellSSymptoms,
        // cerebralHernia: this.seiZure, //入院评估
        previousIllness: newpast,
        isFamilyHistoryOfStroke: this.apoplexy,
        isFamilyHistoryOfCHD: this.coronary,
        isFamilyHistoryOfHypertension: this.hypertension,
        isFamilyHistoryOfDM: this.diabetes,
        isFamilyHistoryOfDyslipidemia: this.Dyslipidemia,
        isFamilyHistoryOfAneurysm: this.Intracranial,
        isHistoryOfAntiplateletDrug: this.Antiplatelet,
        isHistoryOfAnticoagulantDrug: this.Anticoagulation,
        isHistoryOfAntihypertensiveDrug: this.stepDown,
        isHistoryOfLipidRegulatingDrug: this.Regulating,
        isHistoryOfHypoglycemiDrug: this.Hypoglycemic,
        isHistoryOfOtherDrug: this.other,
        isHistoryOfNoDrug: this.Unused,
        remark: this.input
      }
      console.log(data)
      addHistoryPostStroke(data)
        .then(res => {
          console.log(res)
          if (res.code === 0) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.newincalogase = false
          }
        })
        .catch(err => {
          this.$message({
            message: '保存失败',
            type: 'error'
          })
        })
    }
  }
}
</script>

<style scoped>
#box {
  width: 100%;
  height: 100%;
  padding: 10px 20px;
}
.addContent {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #dfdee3;
}
.outer {
  width: 100%;
  background-color: #f9f9f9;
  margin-top: 10px;
  padding: 10px;
}

.outer_layer {
  width: 100%;
  height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.el-row {
  margin: 0 0 15px 0;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  margin-bottom: 10px;
}

.el-checkbox-group {
  margin-left: 10px;
}
.el-radio-group {
  margin-left: 10px;
  margin-top: 10px;
}
.el-input {
  margin-top: 10px;
}

.botton {
  background-color: #f9f9f9;
  margin-right: 20px;
  margin-left: 10px;
  padding: 10px;
}
</style>
